<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">

	<title>智能客服 - 大连万达耐酸泵厂有限公司</title>
	<meta content="" name="description">
	<meta content="智能客服, 大连万达耐酸泵厂" name="keywords">

	<!-- Favicons -->
	<link href="assets/img/logo.png" rel="icon">

	<!-- Google Fonts -->
	<link
		href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i&display=swap"
		rel="stylesheet">

	<!-- Vendor CSS Files -->
	<link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
	<link href="assets/vendor/aos/aos.css" rel="stylesheet">
	<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
	<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
	<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
	<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

	<!-- Template Main CSS File -->
	<link href="assets/css/style.css" rel="stylesheet">

	<!-- Custom CSS for Chat -->
	<style>
		.chat-container {
			max-width: 1000px;
			margin: 30px auto;
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		}

		.chat-header {
			padding: 20px;
			border-bottom: 1px solid #eee;
			text-align: center;
		}

		.chat-messages {
			height: 400px;
			overflow-y: auto;
			padding: 20px;
		}

		.message {
			margin-bottom: 20px;
			display: flex;
			align-items: flex-start;
		}

		.message.user {
			flex-direction: row-reverse;
		}

		.message-content {
			max-width: 70%;
			padding: 12px 16px;
			border-radius: 12px;
			margin: 0 12px;
		}

		.bot .message-content {
			background: #f5f5f5;
		}

		.user .message-content {
			background: #1e4356;
			color: white;
		}

		.avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: #eee;
		}

		.chat-input {
			padding: 20px;
			border-top: 1px solid #eee;
			display: flex;
			gap: 10px;
		}

		.chat-input input {
			flex: 1;
			padding: 12px;
			border: 1px solid #ddd;
			border-radius: 4px;
			outline: none;
		}

		.chat-input button {
			padding: 12px 24px;
			background: #1e4356;
			color: white;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			transition: background 0.3s;
		}

		.chat-input button:hover {
			background: #2a5469;
		}
	</style>
</head>

<body>

	<!-- ======= Header ======= -->
	<header id="header" class="fixed-top d-flex align-items-center">
		<div class="container d-flex justify-content-between align-items-center">
			<div class="logo">
				<h1 class="text-light">
					<a href="index.html">
						<img src="assets/img/logo.png" alt="" class="img-fluid">
						<span>大连万达耐酸泵厂</span>
					</a>
				</h1>
			</div>

			<nav id="navbar" class="navbar">
				<ul>
					<li><a class="active" href="index.html">主页</a></li>
					<li><a href="about.html">关于</a></li>
					<li><a href="portfolio.html">产品</a></li>
					<li class="dropdown"><a href="#"><span>更多</span> <i class="bi bi-chevron-down"></i></a>
						<ul>
							<li><a href="sign.html">登录|注册</a></li>
							<li class="dropdown">
								<a href="portfolio.html">
									<span>产品详情</span>
									<i class="bi bi-chevron-right"></i>
								</a>
								<ul>
									<li><a href="portfolio.html">立式泵</a></li>
									<li><a href="portfolio.html">卧式泵</a></li>
									<li><a href="portfolio.html">多级泵</a></li>
								</ul>
							</li>
							<li><a href="blog.html">公告</a></li>
						</ul>
					</li>
					<li><a href="contact.html">联系我们</a></li>
				</ul>
				<i class="bi bi-list mobile-nav-toggle"></i>
			</nav><!-- .navbar -->
		</div>
	</header><!-- End Header -->

	<main id="main">
		<!-- 面包屑导航 -->
		<section class="breadcrumbs">
			<div class="container">
				<div class="d-flex justify-content-between align-items-center">
					<h2>智能客服</h2>
					<ol>
						<li><a href="index.html">主页</a></li>
						<li>智能客服</li>
					</ol>
				</div>
			</div>
		</section>

		<!-- 聊天界面 -->
		<section class="chat-section">
			<div class="container">
				<div class="chat-container">
					<div class="chat-header">
						<h3>AI客服</h3>
						<p>24小时为您服务</p>
					</div>

					<div class="chat-messages" id="chat-messages">
						<div class="message bot">
							<img src="assets/img/logo.png" class="avatar">
							<div class="message-content">
								您好！我是万达智能客服，很高兴为您服务。请问有什么可以帮助您的吗？
							</div>
						</div>
						<div class="message user">
							<img src="assets/img/user-avatar.png" class="avatar">
							<div class="message-content">你好</div>
						</div>
					</div>

					<div class="chat-input">
						<input type="text" id="user-input" placeholder="请输入您的问题...">
						<button type="button" onclick="sendMessage()">发送</button>
					</div>
				</div>
			</div>
		</section>
	</main>

	<!-- ======= Footer ======= -->
	<footer id="footer" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="500">
		<div class="footer-top">
			<div class="container">
				<div class="row">
					<div class="col-lg-3 col-md-6 footer-links">
						<h4>List Of Links</h4>
						<ul>
							<li><i class="bx bx-chevron-right"></i> <a href="index.html">主页</a></li>
							<li><i class="bx bx-chevron-right"></i> <a href="about.html">关于</a></li>
							<li><i class="bx bx-chevron-right"></i> <a href="blog.html">公告</a></li>
						</ul>
					</div>

					<div class="col-lg-3 col-md-6 footer-links">
						<h4>Our Products</h4>
						<ul>
							<li><i class="bx bx-chevron-right"></i> <a href="portfolio.html">立式泵</a></li>
							<li><i class="bx bx-chevron-right"></i> <a href="portfolio.html">卧式泵</a></li>
							<li><i class="bx bx-chevron-right"></i> <a href="portfolio.html">多级泵</a></li>
						</ul>
					</div>

					<div class="col-lg-3 col-md-6 footer-contact">
						<h4>Contact Us</h4>
						<p>
							<strong>电话：</strong> 13941149568<br>
							<strong>座机：</strong> 0411-86840448<br>
							<strong>邮箱：</strong> <a class="lianjie" href="mailto:dl.wd@163.com"
								style="text-decoration:none;">dl.wd@163.com</a><br>
						</p>
					</div>

					<div class="col-lg-3 col-md-6 footer-info">
						<h3>About Us</h3>
						<p class="suojin">我们倡导与客户相互信任与尊重。共同建立广泛对等合作和战略伙伴关系，并积极探索在互利基础上的多种合作形式。</p>
					</div>
				</div>
			</div>
		</div>

		<div class="container">
			<div class="copyright">
				&copy; Copyright <strong><span>大连万达耐酸泵厂有限公司</span></strong>. All Rights Reserved
			</div>
			<div class="copyright">
				<a class="lianjie" href="https://beian.miit.gov.cn/" target="_blank">辽ICP备2022006841号-1</a>
			</div>
		</div>
	</footer><!-- End Footer -->

	<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

	<!-- Vendor JS Files -->
	<script src="assets/vendor/purecounter/purecounter.js"></script>
	<script src="assets/vendor/aos/aos.js"></script>
	<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
	<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
	<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
	<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
	<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>

	<!-- Template Main JS File -->
	<script src="assets/js/main.js"></script>

	<!-- Custom JS for Chat -->
	<script>
		function sendMessage() {
			const userInput = document.getElementById('user-input');
			const messageText = userInput.value.trim();
			if (messageText) {
				const chatMessages = document.getElementById('chat-messages');
				const userMessage = document.createElement('div');
				userMessage.className = 'message user';
				userMessage.innerHTML = `
					<img src="assets/img/user-avatar.png" class="avatar">
					<div class="message-content">${messageText}</div>
				`;
				chatMessages.appendChild(userMessage);
				userInput.value = '';
				chatMessages.scrollTop = chatMessages.scrollHeight;
			}
		}
	</script>
</body>

</html>